import type { Metadata } from "next";

import Link from "next/link";

import { notFound } from "next/navigation";

import { Card, PageHeader, SectionHeader } from "@/components/ui";

import { PartyTag } from "@/components/party-tag";

import { MemberAvatar } from "@/components/member-avatar";

import { StatusPill, classifyStatus } from "@/components/status-pill";

import { getStateDetail } from "@/lib/feed";

import { formatDate } from "@/lib/format";

export const revalidate = 300;

export function generateMetadata({

  params,

}: {

  params: { code: string };

}): Metadata {

  const detail = getStateDetail(params.code);

  if (!detail) return { title: "State not found" };

  return { title: `${detail.name} (${detail.code})` };

}

function confidenceColor(c: "ok" | "stale" | "missing"): string {

  return c === "ok" ? "var(--dk-yea)" : c === "stale" ? "var(--dk-hold)" : "var(--dk-ash)";

}

function confidenceLabel(c: "ok" | "stale" | "missing"): string {

  return c === "ok" ? "Current" : c === "stale" ? "Stale" : "Coverage rolling out";

}

function formatMemberDistrict(chamber: string, district: number | null): string {

  if (chamber === "senate") return "";

  if (district === null || district <= 0) return " · At-Large";

  return ` · Dist. ${district}`;

}

export default function StateDetailPage({

  params,

}: {

  params: { code: string };

}) {

  const detail = getStateDetail(params.code);

  if (!detail) notFound();

  return (

    <div

      className="mx-auto w-full max-w-[860px] px-6 sm:px-8"

      style={{

        paddingTop: "clamp(32px, 6vw, 56px)",

        paddingBottom: "clamp(48px, 8vw, 80px)",

      }}

    >

      <Link

        href="/states"

        className="focus-ring tap no-underline hover:underline"

        style={{

          display: "inline-flex",

          alignItems: "center",

          gap: "8px",

          fontFamily: "var(--font-mono), ui-monospace, monospace",

          fontSize: "13px",

          letterSpacing: "0.08em",

          color: "var(--dk-signal)",

          marginBottom: "32px",

        }}

      >

        ← States

      </Link>

      <PageHeader

        eyebrow={`State · ${detail.code}`}

        title={detail.name}

        lead={`Congressional delegation and sponsored bills for ${detail.name}. State-level legislative coverage is shown honestly below.`}

      />

      {}

      <div className="mt-8">

        <Card className="p-5">

          <div className="flex flex-wrap items-center gap-3">

            <span

              className="inline-flex items-center gap-1.5"

              style={{ color: confidenceColor(detail.confidence) }}

            >

              <span

                aria-hidden="true"

                className="inline-block h-2 w-2 rounded-full"

                style={{ backgroundColor: confidenceColor(detail.confidence) }}

              />

              <span className="label">

                {confidenceLabel(detail.confidence)}

              </span>

            </span>

            <span className="label text-ash-2">

              {detail.lastScrape ? `Last seen ${formatDate(detail.lastScrape)}` : "No state-leg scrape on record"}

            </span>

          </div>

          {detail.missingTypes.length > 0 ? (

            <p className="mt-3 font-mono text-[13px] text-ash">

              State-legislative data not in the record: {detail.missingTypes.join(", ")}. Federal delegation and bill sponsorships below are from congress.gov.

            </p>

          ) : null}

        </Card>

      </div>

      <div className="mt-10 grid gap-8 lg:grid-cols-2">

        {}

        <div>

          <SectionHeader

            eyebrow={`Current delegation · ${detail.members.length}`}

            title="Members of Congress"

          />

          {detail.members.length === 0 ? (

            <Card className="p-5">

              <p className="font-mono text-[13px] text-ash-2">

                No current members of Congress linked to {detail.name} in the record.

              </p>

            </Card>

          ) : (

            <Card className="divide-y divide-[color:var(--dk-line)]">

              {detail.members.map((m) => (

                <Link

                  key={m.id}

                  href={m.href}

                  className="focus-ring group flex items-center gap-3 p-4 transition-colors hover:bg-graphite"

                >

                  <MemberAvatar name={m.name} photoUrl={m.photoUrl} size="sm" />

                  <span className="min-w-0 flex-1">

                    <span className="block font-mono text-[13px] text-paper group-hover:underline">

                      {m.name}

                    </span>

                    <span className="label mt-1 block text-ash-2">

                      {m.chamber === "senate" ? "Senate" : "House"}

                      {formatMemberDistrict(m.chamber, m.district)}

                    </span>

                  </span>

                  <PartyTag party={m.partyCode} />

                </Link>

              ))}

            </Card>

          )}

        </div>

        {}

        <div>

          <SectionHeader

            eyebrow={`Bills · ${detail.bills.length}`}

            title="Sponsored by delegation"

          />

          {detail.bills.length === 0 ? (

            <Card className="p-5">

              <p className="font-mono text-[13px] text-ash-2">

                No bills sponsored by the {detail.name} delegation are in the record.

              </p>

            </Card>

          ) : (

            <Card className="divide-y divide-[color:var(--dk-line)]">

              {detail.bills.slice(0, 20).map((b) => (

                <div key={b.id} className="p-4">

                  <Link

                    href={b.href}

                    className="focus-ring font-mono text-[13px] text-paper underline underline-offset-4 hover:text-paper"

                  >

                    {b.number}

                  </Link>

                  <p className="mt-1 font-mono text-[12px] text-ash">{b.title}</p>

                  <div className="mt-2">

                    <StatusPill variant={classifyStatus(b.status)}>

                      {b.policyArea || "Introduced"}

                    </StatusPill>

                  </div>

                </div>

              ))}

            </Card>

          )}

        </div>

      </div>

    </div>

  );

}